<!-- TabBar 文章资讯 -->
<template>
	<view class="monitor">
		<cu-custom bgColor="bg-gradual-blue" :isBack="false" class="nav-custom">
			<block slot="content">监测预警</block>
		</cu-custom>
		<view class="app-box" :style="{ height: appHeight + 'px' }">
			<view class="monitor-title">
				<view>实况监测</view>
			</view>
			<view class="monitor-box">
				<view class="icon-path" v-for="(item, index) in liveList" :key="index" @click="turnToPage(item.path)">
					<view class="icon-box" :style="{ background: item.bgColor }">
						<image mode="widthFix" :src="`../../static/image/common/${item.icon}.png`" class="icon"></image>
					</view>
					<view class="icon-text">{{ item.style.navigationBarTitleText }}</view>
				</view>
			</view>

			<view class="monitor-title">
				<view>预警服务</view>
			</view>
			<view class="monitor-box">
				<view class="icon-path" v-for="(item, index) in warnList" :key="index" @click="turnToPage(item.path)">
					<view class="icon-box" :style="{ background: item.bgColor }">
						<image mode="widthFix" :src="`../../static/image/common/${item.icon}.png`" class="icon"></image>
					</view>
					<view class="icon-text">{{ item.style.navigationBarTitleText }}</view>
				</view>
			</view>
			<view class="monitor-title">
				<view>应急数据</view>
			</view>
			<view class="monitor-box">
				<view class="icon-path" v-for="(item, index) in ejDataList" :key="index" @click="turnToPage(item.path)">
					<view class="icon-box" :style="{ background: item.bgColor }">
						<image mode="widthFix" :src="`../../static/image/common/${item.icon}.png`" class="icon"></image>
					</view>
					<view class="icon-text">{{ item.style.navigationBarTitleText }}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				appHeight: 0,
				liveList: [
					{
						path: 'pages/monitor/meteo-radar',
						style: {
							navigationBarTitleText: '气象雷达',
							enablePullDownRefresh: false,
							navigationStyle: 'custom'
						},
						icon: 'radar',
						bgColor: '#2d81ff'
					},
					{
						path: 'pages/monitor/cloud',
						style: {
							navigationBarTitleText: '卫星云图',
							enablePullDownRefresh: false,
							navigationStyle: 'custom'
						},
						icon: 'satellite',
						bgColor: '#995aff'
					},
					{
						path: 'pages/monitor/typhoon',
						style: {
							navigationBarTitleText: '台风路径',
							enablePullDownRefresh: false,
							navigationStyle: 'custom'
						},
						icon: 'typhoon',
						bgColor: '#00c2ff'
					},
					{
						path: 'pages/monitor/monitor-control?type=moreEle',
						style: {
							navigationBarTitleText: '风雨查询',
							enablePullDownRefresh: false,
							navigationStyle: 'custom'
						},
						icon: 'rain',
						bgColor: '#0085ff'
					},
					{
						path: 'pages/monitor/monitor-control?type=water',
						style: {
							navigationBarTitleText: '水情',
							enablePullDownRefresh: false,
							navigationStyle: 'custom'
						},
						icon: 'riverSurface',
						bgColor: '#25d2c8'
					},
					{
						path: 'pages/monitor/monitor-control?type=work',
						style: {
							navigationBarTitleText: '工情',
							enablePullDownRefresh: false,
							navigationStyle: 'custom'
						},
						icon: 'reservoir',
						bgColor: '#ff62a4'
					},
					{
						path: 'pages/monitor/monitor-control?type=video',
						style: {
							navigationBarTitleText: '视频监控',
							enablePullDownRefresh: false,
							navigationStyle: 'custom'
						},
						icon: 'video',
						bgColor: '#ff9649'
					},
					{
						path: 'pages/monitor/monitor-control?type=dzd',
						style: {
							navigationBarTitleText: '地灾隐患点',
							enablePullDownRefresh: false,
							navigationStyle: 'custom'
						},
						icon: 'seismicRisk',
						bgColor: '#ff0000'
					}
				],
				warnList: [
					//   ---------------气象预警-------------
					{
						path: 'pages/monitor/meteo-warn?index=1',
						style: {
							navigationBarTitleText: '气象预警',
							enablePullDownRefresh: false,
							navigationStyle: 'custom'
						},
						icon: 'warn',
						bgColor: '#af60ff'
					},
					{
						path: 'pages/monitor/meteo-warn?index=2',
						style: {
							navigationBarTitleText: '山洪预警',
							enablePullDownRefresh: false,
							navigationStyle: 'custom'
						},
						icon: 'wave',
						bgColor: '#ff6b00'
					},
					{
						path: 'pages/monitor/meteo-warn?index=3',
						style: {
							navigationBarTitleText: '地灾预警',
							enablePullDownRefresh: false,
							navigationStyle: 'custom'
						},
						icon: 'lowRisk',
						bgColor: '#ff4747'
					},
					{
						path: 'pages/monitor/meteo-warn?index=4',
						style: {
							navigationBarTitleText: '河道预警',
							enablePullDownRefresh: false,
							navigationStyle: 'custom'
						},
						icon: 'river',
						bgColor: '#6c8dff'
					},
					{
						path: 'pages/monitor/server-tip?index=1',
						style: {
							navigationBarTitleText: '服务提示',
							enablePullDownRefresh: false,
							navigationStyle: 'custom'
						},
						icon: 'start',
						bgColor: '#ff4cc2'
					},
					{
						path: 'pages/monitor/safety-review',
						style: {
							navigationBarTitleText: '天气综述',
							enablePullDownRefresh: false,
							navigationStyle: 'custom'
						},
						icon: 'safety',
						bgColor: '#78A779'
					},
					{
						path: 'pages/monitor/weather',
						style: {
							navigationBarTitleText: '重要天气',
							enablePullDownRefresh: false,
							navigationStyle: 'custom'
						},
						icon: 'weather',
						bgColor: '#B49D7B'
					}
				],
				ejDataList: [
					{
						path: 'pages/emergency/dataMag',
						style: {
							navigationBarTitleText: '防汛资源',
							enablePullDownRefresh: false,
							navigationStyle: 'custom'
						},
						icon: 'warn',
						bgColor: '#2EC38E'
					}
				]
			}
		},
		methods: {
			turnToPage(item) {
				uni.navigateTo({ url: '/' + item })
				// let url = '/pages/webview/webview?pagePath=' + item
				// uni.navigateTo({
				// 	url: url
				// })
			},
			async statPage() {
				this.appHeight = await this.$getHeight('.nav-custom')
			}
		},
		mounted() {
			this.statPage()
		}
	}
</script>

<style lang="scss" scoped>
	.app-box {
		// padding-top: 20rpx;
		position: relative;
		width: 100%;
		background: #fff;
		box-shadow: 0rpx 6rpx 6rpx rgba(0, 0, 0, 0.07) inset;

		.monitor-title {
			font-size: 31rpx;
			font-weight: 600;
			color: #525252;
			margin: 0 20rpx 10rpx 20rpx;
			padding: 20rpx 0;
			border-bottom: 1px solid #e2e2e2;
		}
	}

	.monitor-box {
		width: 100%;
		display: flex;
		align-items: center;
		flex-wrap: wrap;

		.icon-path {
			width: 25%;
			margin: 20rpx 0;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			.icon-box {
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
				display: flex;
				justify-content: center;
				align-items: center;

				.icon {
					width: 45rpx;
				}
			}

			.icon-text {
				margin-top: 15rpx;
				font-weight: 500;
				font-size: 26rpx;
				color: #787878;
			}
		}
	}
</style>
